<template>
  <div class="col-xs-12">
    <div class="support-filters row row-flex row-flex-wrap">
      <div class="col-md-2">
        <div class="flex-col">
          <span class="title">Support</span>
        </div>
      </div>
      <div class="col-md-10">
        <label>
          Community
          <input v-model="supportType" type="checkbox" value="Community" />
        </label>

        <label>
          Rundeck Supported
          <input
            v-model="supportType"
            type="checkbox"
            value="Rundeck Supported"
          />
        </label>

        <label>
          Enterprise Exclusive
          <input
            v-model="supportType"
            type="checkbox"
            value="Enterprise Exclusive"
          />
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapActions } from "vuex";

export default defineComponent({
  name: "FacetFilters",

  data() {
    return {
      supportType: [],
    };
  },
  watch: {
    supportType: function (newVal, oldVal) {
      this.setSupportTypeFilter(newVal);
    },
  },
  methods: {
    ...mapActions(["setSupportTypeFilter"]),
  },
});
</script>
<style lang="scss" scoped>
.support-filters {
  background: black;
  color: white;
  padding: 2em 1em;
  font-size: 20px;
  .title {
    color: #cdcdcd;
    display: flex;
    // align-items: center;
    font-size: 1.8rem;
    padding: 1em 2em;
    text-transform: uppercase;
    letter-spacing: 3.44px;
  }
  label {
    border: 1px solid blue;
    padding: 1em 2em;
    input[type="checkbox"] {
      display: none;
    }
  }
  :checked + label {
    font-weight: bold;
    border: 1px solid red;
  }
}
</style>
